<template>
    <el-main>
        <el-row :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <div class="row">
                    <el-form :inline="true">
                      <el-form-item label="图标类型">
                        <el-select v-model="chartType">
                          <el-option label="Spline" value="Spline"></el-option>
                          <el-option label="AreaSpline" value="AreaSpline"></el-option>
                          <el-option label="Line" value="Line"></el-option>
                          <el-option label="Scatter" value="Scatter"></el-option>
                          <el-option label="Column" value="Column"></el-option>
                          <el-option label="Area" value="Area"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="时间段">
                          <el-date-picker
                            v-model="datestep"
                            type="monthrange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份"
                            value-format="yyyy-MM"
                            :picker-options="pickerOptions"
                            @change="getChooseDate">
                          </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="row chartElem">
                    <charts class="chart" :options="chartOptions" :updateArgs="updateArgs"></charts>
                </div>
                <div class="row chartSpit">
                    <el-form>
                      <el-form-item label="时间段">
                          <el-date-picker
                            v-model="datestepPie"
                            type="monthrange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份"
                            value-format="yyyy-MM"
                            :picker-options="pickerOptions"
                            @change="getChooseDatePie">
                          </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="row chartElem">
                    <charts class="chart" :options="chartOptionsPie"></charts>
                </div>
            </el-card>
        </el-row>
    </el-main>
</template>
<script>
    export default {
        data() {
            return {
                pickerOptions: {
                  shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                      picker.$emit('pick', [new Date(), new Date()]);
                    }
                  }, {
                    text: '今年至今',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date(new Date().getFullYear(), 0);
                      picker.$emit('pick', [start, end]);
                    }
                  }, {
                    text: '最近六个月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setMonth(start.getMonth() - 6);
                      picker.$emit('pick', [start, end]);
                    }
                  }]
                },
                datestep: '',
                chartType: 'Spline',
                updateArgs: [true, true, {
                    duration: 1000
                }],
                chartOptions: {
                    chart: {
                        type: 'spline'
                    },
                    title: {
                        text: '用户注册量'
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: '数量'
                        },
                    },
                    series: [{
                        data: [],
                        color: '#6fcd98',
                        name: '注册量',
                    }]
                },
                datestepPie: '',
                chartOptionsPie: {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br/><b>用户数量</b>: {point.y}'
                    },
                    title: {
                        text: '用户注册量饼状图'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %<br/><b>用户数量</b>: {point.y}',
                                // style: {
                                //     color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                // }
                            }
                        }
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: '数量'
                        },
                    },
                    series: [{
                        name: '注册量占比',
                        colorByPoint: true,
                        data: []
                    }]
                }
            }
        },
        created() {
            this.userRegisterCharts(),
            this.userRegisterChartsOfPie()
        },
        watch: {
            chartType(newValue) {
                this.chartOptions.chart.type = newValue.toLowerCase()
            }
        },
        methods:{
            getChooseDate (date) {
                this.datestep = date
                this.userRegisterCharts()
            },
            getChooseDatePie (date) {
                this.datestepPie = date
                this.userRegisterChartsOfPie()
            },
            userRegisterChartsOfPie() {
                const _this = this
                const params = {
                    datestep: _this.datestepPie,
                    type: 2
                }
                _this.axios.post(_this.$API.ZHIHUAPI.userRegisterCharts, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.chartOptionsPie.series[0].data = res.data.seriesData
                        } else {
                            _this.chartOptionsPie.series[0].data = []
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.chartOptionsPie.series[0].data = []
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.chartOptionsPie.series[0].data = []
                })
            },
            userRegisterCharts() {
                const _this = this
                const params = {
                    datestep: _this.datestep,
                    type: 1
                }
                _this.axios.post(_this.$API.ZHIHUAPI.userRegisterCharts, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.chartOptions.xAxis.categories = res.data.categories
                            _this.chartOptions.series[0].data = res.data.seriesData
                        } else {
                            _this.chartOptions.xAxis.categories = []
                            _this.chartOptions.series[0].data = []
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.chartOptions.xAxis.categories = []
                        _this.chartOptions.series[0].data = []
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.chartOptions.xAxis.categories = []
                    _this.chartOptions.series[0].data = []
                })
            }
        }
    }
</script>

<style scoped>
    .chartElem{
        border-bottom:1px solid #0080FF;
    }
    .chartSpit {
        margin-top: 20px;
    }
</style>
